<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="130px">
      <el-form-item label="标题(英文)" prop="titleEn">
        <el-input v-model="dataForm.titleEn" placeholder="标题" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="标题(中文)" prop="titleEn">
        <el-input v-model="dataForm.titleEn" placeholder="标题" style="width: 50%"></el-input>
        <el-button type="primary" icon="el-icon-edit" circle @click="" style="margin-left: 15px">翻译</el-button>
      </el-form-item>
      <el-form-item label="URL" prop="linkEn">
        <el-input v-model="dataForm.linkEn" placeholder="URL"></el-input>
      </el-form-item>
      <el-form-item label="Redirection URL" prop="redirectLinkEn">
        <el-input v-model="dataForm.redirectLinkEn" placeholder="重定向URL"></el-input>
      </el-form-item>
      <el-form-item label="描述(英文)" prop="descriptionEn">
        <el-input type="textarea" autosize v-model="dataForm.descriptionEn" placeholder="描述"></el-input>
      </el-form-item>
      <el-form-item label="描述(中文)" prop="descriptionEn">
        <el-input type="textarea" autosize v-model="dataForm.descriptionEn" placeholder="描述"></el-input>
      </el-form-item>
      <el-form-item label="上传图片" prop="pictureAndVideosEn">
        <!--        <el-input type="textarea" autosize v-model="dataForm.pictureAndVideosEn" placeholder="图片URL"></el-input>-->
        <el-upload
          ref="upload"
          action="#"
          accept="image/png,image/gif,image/jpg,image/jpeg"
          list-type="picture-card"
          :auto-upload="false"
          :before-upload="handleBeforeUpload"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="uploadFile">立即上传</el-button>
        <el-button size="small">取消</el-button>
      </el-form-item>
      <el-form-item label="点赞数量" prop="likesEn">
        <el-input v-model="dataForm.likesEn" placeholder="点赞数量"></el-input>
      </el-form-item>
      <!--    <el-form-item label="发布状态" prop="isPublish">
        <el-input v-model="dataForm.isPublish" placeholder="发布状态"></el-input>
      </el-form-item>
      <el-form-item label="MD5加密url" prop="md5Url">
            <el-input v-model="dataForm.md5Url" placeholder="MD5加密url"></el-input>
          </el-form-item>
          <el-form-item label="创建者id" prop="createdBy">
            <el-input v-model="dataForm.createdBy" placeholder="创建者id"></el-input>
          </el-form-item>
          <el-form-item label="更新者id" prop="updatedBy">
            <el-input v-model="dataForm.updatedBy" placeholder="更新者id"></el-input>
          </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-input v-model="dataForm.createTime" placeholder="创建时间"></el-input>
      </el-form-item>
      <el-form-item label="更新时间" prop="updateTime">
        <el-input v-model="dataForm.updateTime" placeholder="更新时间"></el-input>
      </el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      formLabelWidth: '80px',
      form: {},
      fileList3: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      visible: false,
      dataForm: {
        id: 0,
        titleEn: '',
        linkEn: '',
        redirectLinkEn: '',
        likesEn: '',
        descriptionEn: '',
        pictureAndVideosEn: '',
        isPublish: '',
        md5Url: '',
        createdBy: '',
        updatedBy: '',
        createTime: '',
        updateTime: ''
      },
      dataRule: {
        titleEn: [
          {required: true, message: '应用程序的标题不能为空', trigger: 'blur'}
        ],
        linkEn: [
          {required: true, message: '链接不能为空', trigger: 'blur'}
        ],
        redirectLinkEn: [
          {required: true, message: '重定向链接不能为空', trigger: 'blur'}
        ],
        likesEn: [
          {required: true, message: '点赞数量不能为空', trigger: 'blur'}
        ],
        descriptionEn: [
          {required: true, message: '应用程序的描述不能为空', trigger: 'blur'}
        ],
        pictureAndVideosEn: [
          {required: true, message: '图片、视频不能为空', trigger: 'blur'}
        ],
        isPublish: [
          {required: true, message: '发布状态不能为空', trigger: 'blur'}
        ],
        md5Url: [
          {required: true, message: 'MD5加密url不能为空', trigger: 'blur'}
        ],
        createdBy: [
          {required: true, message: '创建者id不能为空', trigger: 'blur'}
        ],
        updatedBy: [
          {required: true, message: '更新者id不能为空', trigger: 'blur'}
        ],
        createTime: [
          {required: true, message: '创建时间不能为空', trigger: 'blur'}
        ],
        updateTime: [
          {required: true, message: '更新时间不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 上传文件之前的钩子
    handleBeforeUpload (file) {
      console.log('before')
      if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
      }
      let size = file.size / 1024 / 1024 / 2
      if (size > 2) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
      }
    },
    // 文件列表移除文件时的钩子
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    uploadFile () {
      this.$refs.upload.submit()
    },
    init (id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/datamanagement/datacowproducthunten/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.titleEn = data.datacowProductHuntEn.titleEn
              this.dataForm.linkEn = data.datacowProductHuntEn.linkEn
              this.dataForm.redirectLinkEn = data.datacowProductHuntEn.redirectLinkEn
              this.dataForm.likesEn = data.datacowProductHuntEn.likesEn
              this.dataForm.descriptionEn = data.datacowProductHuntEn.descriptionEn
              this.dataForm.pictureAndVideosEn = data.datacowProductHuntEn.pictureAndVideosEn
              this.dataForm.isPublish = data.datacowProductHuntEn.isPublish
              this.dataForm.md5Url = data.datacowProductHuntEn.md5Url
              this.dataForm.createdBy = data.datacowProductHuntEn.createdBy
              this.dataForm.updatedBy = data.datacowProductHuntEn.updatedBy
              this.dataForm.createTime = data.datacowProductHuntEn.createTime
              this.dataForm.updateTime = data.datacowProductHuntEn.updateTime
            }
          })
        }
      })
    }
    ,
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/datamanagement/datacowproducthunten/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'titleEn': this.dataForm.titleEn,
              'linkEn': this.dataForm.linkEn,
              'redirectLinkEn': this.dataForm.redirectLinkEn,
              'likesEn': this.dataForm.likesEn,
              'descriptionEn': this.dataForm.descriptionEn,
              'pictureAndVideosEn': this.dataForm.pictureAndVideosEn,
              'isPublish': this.dataForm.isPublish,
              'md5Url': this.dataForm.md5Url,
              'createdBy': this.dataForm.createdBy,
              'updatedBy': this.dataForm.updatedBy,
              'createTime': this.dataForm.createTime,
              'updateTime': this.dataForm.updateTime
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

